<template>
  <div class="contract-form-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button text @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>{{ isEdit ? '编辑合同' : '新建合同' }}</h2>
      </div>
      <div class="header-actions">
        <el-button @click="handleSaveDraft">
          <el-icon><DocumentCopy /></el-icon>
          保存草稿
        </el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          <el-icon><Check /></el-icon>
          提交审批
        </el-button>
      </div>
    </div>

    <!-- 表单内容 -->
    <el-card class="form-card" shadow="never">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        size="default"
      >
        <!-- 基本信息 -->
        <el-divider content-position="left">
          <h3>
            <el-icon><Document /></el-icon>
            基本信息
          </h3>
        </el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同编号" prop="code">
              <el-input v-model="formData.code" placeholder="自动生成" :disabled="isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入合同名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择合同类型">
                <el-option label="销售合同" value="sales" />
                <el-option label="采购合同" value="purchase" />
                <el-option label="服务合同" value="service" />
                <el-option label="租赁合同" value="lease" />
                <el-option label="其他" value="other" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同金额" prop="amount">
              <el-input-number
                v-model="formData.amount"
                :min="0"
                :precision="2"
                :step="1000"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="签订日期" prop="signDate">
              <el-date-picker
                v-model="formData.signDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="formData.startDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="formData.endDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 双方信息 -->
        <el-divider content-position="left">
          <h3>
            <el-icon><User /></el-icon>
            双方信息
          </h3>
        </el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方名称" prop="partyA">
              <el-input v-model="formData.partyA" placeholder="请输入甲方名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲方联系人" prop="partyAContact">
              <el-input v-model="formData.partyAContact" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方电话" prop="partyAPhone">
              <el-input v-model="formData.partyAPhone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲方地址" prop="partyAAddress">
              <el-input v-model="formData.partyAAddress" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="乙方名称" prop="partyB">
              <el-input v-model="formData.partyB" placeholder="请输入乙方名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方联系人" prop="partyBContact">
              <el-input v-model="formData.partyBContact" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="乙方电话" prop="partyBPhone">
              <el-input v-model="formData.partyBPhone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方地址" prop="partyBAddress">
              <el-input v-model="formData.partyBAddress" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 合同内容 -->
        <el-divider content-position="left">
          <h3>
            <el-icon><Reading /></el-icon>
            合同内容
          </h3>
        </el-divider>

        <el-form-item label="合同条款" prop="terms">
          <el-input
            v-model="formData.terms"
            type="textarea"
            :rows="6"
            placeholder="请输入合同主要条款..."
          />
        </el-form-item>

        <el-form-item label="备注说明">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注说明..."
          />
        </el-form-item>

        <!-- 附件上传 -->
        <el-divider content-position="left">
          <h3>
            <el-icon><Paperclip /></el-icon>
            附件上传
          </h3>
        </el-divider>

        <el-form-item label="合同附件">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            multiple
          >
            <el-icon class="el-icon--upload"><Upload /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 PDF、Word、Excel、图片等格式，单个文件不超过 10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <!-- 审批流程 -->
        <el-divider content-position="left">
          <h3>
            <el-icon><Connection /></el-icon>
            审批流程
          </h3>
        </el-divider>

        <el-form-item label="审批人" prop="approvers">
          <el-select
            v-model="formData.approvers"
            multiple
            placeholder="请选择审批人"
            style="width: 100%"
          >
            <el-option label="张三 - 部门经理" value="user1" />
            <el-option label="李四 - 财务经理" value="user2" />
            <el-option label="王五 - 总经理" value="user3" />
          </el-select>
        </el-form-item>

        <el-form-item label="抄送人">
          <el-select
            v-model="formData.ccs"
            multiple
            placeholder="请选择抄送人"
            style="width: 100%"
          >
            <el-option label="赵六 - 法务" value="user4" />
            <el-option label="钱七 - 行政" value="user5" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, DocumentCopy, Check, Document, User, Reading,
  Paperclip, Upload, Connection
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const isEdit = computed(() => route.name === 'ContractEdit')
const contractId = computed(() => route.params.id)

const formRef = ref(null)
const submitting = ref(false)

// 表单数据
const formData = reactive({
  code: '',
  name: '',
  type: '',
  amount: null,
  signDate: '',
  startDate: '',
  endDate: '',
  partyA: '',
  partyAContact: '',
  partyAPhone: '',
  partyAAddress: '',
  partyB: '',
  partyBContact: '',
  partyBPhone: '',
  partyBAddress: '',
  terms: '',
  remark: '',
  approvers: [],
  ccs: []
})

// 校验规则
const rules = {
  name: [
    { required: true, message: '请输入合同名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择合同类型', trigger: 'change' }
  ],
  amount: [
    { required: true, message: '请输入合同金额', trigger: 'blur' }
  ],
  signDate: [
    { required: true, message: '请选择签订日期', trigger: 'change' }
  ],
  startDate: [
    { required: true, message: '请选择开始日期', trigger: 'change' }
  ],
  endDate: [
    { required: true, message: '请选择结束日期', trigger: 'change' }
  ],
  partyA: [
    { required: true, message: '请输入甲方名称', trigger: 'blur' }
  ],
  partyB: [
    { required: true, message: '请输入乙方名称', trigger: 'blur' }
  ],
  terms: [
    { required: true, message: '请输入合同条款', trigger: 'blur' }
  ],
  approvers: [
    { required: true, message: '请选择审批人', trigger: 'change' }
  ]
}

// 返回
const handleBack = () => {
  router.back()
}

// 保存草稿
const handleSaveDraft = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('草稿保存成功')
      setTimeout(() => {
        router.push('/contract/list')
      }, 1000)
    }
  })
}

// 提交审批
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      
      // 模拟提交
      setTimeout(() => {
        submitting.value = false
        ElMessage.success('提交成功，等待审批')
        router.push('/contract/list')
      }, 1500)
    } else {
      ElMessage.error('请完善表单信息')
    }
  })
}

// 加载数据（编辑模式）
const loadData = () => {
  if (isEdit.value && contractId.value) {
    // 模拟加载数据
    Object.assign(formData, {
      code: 'CT2024001',
      name: '软件开发服务合同',
      type: 'service',
      amount: 500000,
      signDate: '2024-01-15',
      startDate: '2024-02-01',
      endDate: '2024-12-31',
      partyA: '某科技有限公司',
      partyAContact: '张三',
      partyAPhone: '13800138000',
      partyAAddress: '北京市朝阳区XX路XX号',
      partyB: '某信息技术公司',
      partyBContact: '李四',
      partyBPhone: '13900139000',
      partyBAddress: '上海市浦东新区XX路XX号',
      terms: '1. 甲方委托乙方进行软件开发...\n2. 项目周期为10个月...\n3. 付款方式：分三期支付...',
      remark: '本合同一式两份，甲乙双方各执一份',
      approvers: ['user1', 'user2'],
      ccs: []
    })
  } else {
    // 新建模式，生成合同编号
    formData.code = `CT${new Date().getFullYear()}${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.contract-form-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.form-card {
  margin-bottom: 20px;
}

.el-divider h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #303133;
}

.upload-demo {
  width: 100%;
}

.el-icon--upload {
  font-size: 67px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.el-upload__text {
  color: #606266;
  font-size: 14px;
}

.el-upload__text em {
  color: #409eff;
  font-style: normal;
}
</style>

